<template>
    <div class="payment-history">
        <c-wrap title="费用账单" bgColor="white">
            <c-cell></c-cell>
            <div class="break"></div>
            <div class="mint-navbar">
                <div class="mint-tab-item" v-for="(item, index) in tabData" :key="item" @click="clickTab(item, index)">
                    <div class="mint-tab-item-label">{{item}}年</div>
                </div>
            </div>
            <div class="break"></div>
            <!-- tab-container -->
            <template>
                <mt-cell class="p-cell" style="border-bottom: solid 0.5px gainsboro">
                    <div slot="title">水量: <span style="color: orangered" v-if="year">{{year.volumeYear}}</span>
                        <span v-else>--</span>m³
                    </div>
                    <div>水费: <span style="color: orangered" v-if="year">{{year.priceYear}}</span>
                        <span v-else>--</span>元
                    </div>
                </mt-cell>
                <div class="flex-wrap">
                    <div class="card"><span class="dot" style="background-color: mediumseagreen;"></span>第一阶梯</div>
                    <div class="card"><span class="dot" style="background-color: sandybrown;"></span>第二阶梯</div>
                    <div class="card"><span class="dot" style="background-color: orangered;"></span>第三阶梯</div>
                </div>
                <div style="width: 100%">
                    <div v-for="item in cardData" :key="item.month" class="card" @click="click(item)"
                         style="font-size: 14px; float: left;">
                        <div
                            :style="{'background-color': !item.volume?'gray':item.level===1?'mediumseagreen':item.level===2?'sandybrown':'orangered'}">
                            {{item.month}}月
                        </div>
                        <div v-if="!item.volume"
                             style="height: 40px;padding:5px;background-color: rgba(128,128,128, .5);"></div>
                        <template v-else>
                            <div v-if="item.volume"
                                 :style="{height: '40px',padding: '5px','text-align': 'right','background-color':item.level===1?'rgba(60,179,113, .5)':item.level===2?'rgba(244,164,96, .5)':'rgba(255,69,0, .5)'}">
                                <div>
                                    <icon clazz="icon-shoushuiliang"
                                          style="width: 19px;height: 19px;color: white;float: left"></icon>
                                    <span style="font-weight: bolder">{{item.price}}</span>元
                                </div>
                                <div>
                                    <icon clazz="icon-shui1"
                                          style="width: 19px;height: 19px;color: white;float: left"></icon>
                                    <span style="font-weight: bolder">{{item.volume}}</span>m³
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'
    import CCell from '../../components/CCell'

    export default {
        components: {CWrap, CCell},
        data() {
            return {
                selected: '',
                year: [
                    {
                        volumeYear: 0,
                        priceYear: 0
                    }
                ],
                cardData: []
            }
        },
        computed: {
            tabData: function () {
                let d = [];
                for (let i = 0; i < 3; i++) {
                    let val = app.util.formatDate(new Date(), 'yyyy', {year: -i});
                    d.push(val);
                }
                return d.reverse();
            }
        },
        methods: {
            click(item) {
                let month = item.month < 10 ? '0' + item.month : item.month;
                if (item.volume) {
                    this.$router.push({
                        name: 'paymentDetail',
                        params: {
                            month: this.selected + '-' + month
                        }
                    });
                } else {
                    this.$toast({
                        message: item.month + '月无账单',
                        duration: 3000
                    })
                }
            },
            clickTab(item, index) {
                this.selected = item;

                let arr = document.getElementsByClassName('mint-tab-item');
                for (let i = 0; i < 3; i++) {
                    arr[i].classList.remove('is-selected');
                }
                this.$nextTick(() => {
                    arr[index].classList.add('is-selected');
                    this.loadData();
                });
            },
            loadData() {
                this.cardData = [];
                app.ajax.get(app.config.api.bill.detail, {
                    year: this.selected
                }, (res) => {
                    this.year = res.data.year;
                    for (let i = 0; i < 12; i++) {
                        this.cardData.push({
                            month: i + 1,
                            volume: res.data.list[i].volume,
                            price: res.data.list[i].price,
                            level: res.data.list[i].level
                        });
                    }
                });
            }
        },
        mounted() {
            this.clickTab(app.util.formatDate(new Date(), 'yyyy'), 2);
        }
    }
</script>
<style>
    .payment-history .mint-navbar {
        padding: 10px;
    }

    .payment-history .mint-tab-item {
        border: solid 1px gainsboro;
        border-radius: 10px;
        margin-right: 10px;
    }

    .payment-history .mint-tab-item:last-child {
        margin-right: 0;
    }

    .payment-history .mint-navbar .mint-tab-item {
        padding: 10px 0;
        font-size: 18px;
    }

    .payment-history .mint-navbar .mint-tab-item.is-selected {
        border: solid 1px #26a2ff;
        margin-bottom: auto;
    }

    .payment-history .mint-tab-item-label {
        font-size: 16px;
    }
</style>
